<template>
  <CustomDialog v-model:visible="dialogVisible" top="10vh" curent-class="food-price-dialog">
    <div class="dinerDialog-content" v-if="currentFoodData">
      <div class="title">菜品价格</div>
      <div class="good-name">{{ foodName }}</div>
      <div class="dinerDialog-input-box">
        <div class="label">单价</div>
        <div class="dinerDialog-input">
          <input class="input" v-model.trim="keyword" type="number" placeholder="请输入价格" />
          <img
            class="image"
            src="@/assets/images/home/input-clear.png"
            alt=""
            v-if="keyword"
            @click="handleClear"
          />
        </div>
      </div>
    </div>

    <NumberKeyboard
      v-model:keyword="keyword"
      @onInputKeyboard="onInputKeyboard"
      @onCancel="handleClear"
      @onConfirm="handleConfirm"
      :loading="false"
    />

    <div class="dinerDialog-bottom-desc" v-if="currentFoodData">
      数量{{ foodCount }}，总价：{{ totalPrice }}
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import NumberKeyboard from '@/components/NumberKeyboard/Index.vue'

interface Props {
  modelValue: boolean
  currentFood?: any
}

interface Emits {
  (e: 'update:modelValue', v: boolean): void
  (e: 'confirm', payload: { price: number }): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  currentFood: null
})
const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
})

const currentFoodData = computed(() => props.currentFood)
const keyword = ref('')

const foodName = computed(
  () => currentFoodData.value?.name || currentFoodData.value?.foodName || ''
)
const unitPrice = computed(() =>
  Number(currentFoodData.value?.price || currentFoodData.value?.foodPrice || 0)
)
const foodCount = computed(() =>
  Number(currentFoodData.value?.num || currentFoodData.value?.foodNum || 0)
)
const totalPrice = computed(() => {
  const price = keyword.value ? Number(keyword.value) : unitPrice.value
  return (price * foodCount.value).toFixed(2)
})

watch(
  () => props.modelValue,
  v => {
    if (v) keyword.value = ''
  }
)

const handleClear = () => (keyword.value = '')
const onInputKeyboard = (val: string) => (keyword.value = val)

const handleConfirm = async () => {
  if (!currentFoodData.value) return
  if (!keyword.value) {
    ElMessage.warning('请输入金额')
    return
  }
  const priceNum = Number(keyword.value)
  if (isNaN(priceNum) || priceNum < 0) {
    ElMessage.warning('请输入有效金额')
    return
  }
  emit('confirm', { price: priceNum })
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.dinerDialog-content {
  .title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #333333;
  }
  .good-name {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    color: #353535;
    margin-top: 30px;
  }
  .dinerDialog-input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    margin-bottom: 60px;
    margin-top: 30px;
    .label {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .dinerDialog-input {
      width: 420px;
      height: 48px;
      background: #ffffff;
      border: 1px solid #d2d2d2;
      border-radius: 12px;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .input {
        width: 400px;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #333333;
        outline: none;
        border: none;
      }
      .image {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }
  }
}
.dinerDialog-bottom-desc {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  color: #353535;
  margin-top: 20px;
}
</style>
